<template>
    <div class="table">
        <div class="container">
          <el-row>
            <el-col :span="12">
              <div class="handle-box">
                <el-button type="primary" size="mini"  class="handle-del mr10" @click="add">新增</el-button>
                <el-input v-model="keyword" size="mini"  placeholder="筛选名称" class="handle-input mr10"></el-input>
                <el-button type="primary" size="mini"  @click="query">筛选</el-button>
              </div>
              <el-table style="width:95%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable"  @row-click="handlerShowEnums">
                  <el-table-column type="index" label="序号" align="center" width="50"/>
                      <el-table-column prop="fdName" label="枚举名称" sortable />
                      <el-table-column prop="fdType" label="枚举类型" sortable />
                      <el-table-column prop="fdIsSystem" label="系统枚举" sortable>
                        <template slot-scope="scope">
                          <el-switch v-model="scope.row.fdIsSystem" :disabled="true"/>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="180" align="center">
                          <template slot-scope="scope">
                              <el-button  size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
                              <el-button  size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                          </template>
                      </el-table-column>
              </el-table>
              <div class="pagination">
                  <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
              </div>
            </el-col>
            <el-col :span="12" v-show="dataForm.fdMainId!=''">
              <div class="handle-box" style="height:32px">
              </div>
              <el-table style="width:95%" :data="tableEnumData" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable"  >
                  <el-table-column type="index" label="序号" align="center" width="50"/>
                      <el-table-column prop="fdName" label="枚举名称" align="center" />
                      <el-table-column prop="fdValue" label="枚举值" align="center"  />
                      <el-table-column label="操作" width="180" align="center">
                          <template slot-scope="scope">
                              <el-button size="mini"  @click="handlerEnumDataEdit(scope.row)">编辑</el-button>
                              <el-button  size="mini" type="danger" @click="handlerEnumDataDelete(scope.$index, scope.row)">删除</el-button>
                          </template>
                      </el-table-column>
              </el-table>
              <el-col :span="4">
                &nbsp;
              </el-col>
              <el-col :span="16">
                <el-form ref="dataForm" :rules="dataRules" :model="dataForm" label-width="80px" style="margin-top:20px;">
                  <el-form-item label="枚举名称" prop="fdName">
                      <el-input placeholder="请输入枚举名称" v-model="dataForm.fdName" ></el-input>
                  </el-form-item>
                  <el-form-item label="枚举值" prop="fdValue">
                      <el-input placeholder="请输入枚举值" v-model="dataForm.fdValue" ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button  size="mini" type="primary" @click="handlerSaveData">确 定</el-button>
                    <el-button size="mini"  @click="handlerDataFormReset">重置</el-button>
                  </el-form-item>
                  
                </el-form>
                
              </el-col>
              <el-col :span="4">
                &nbsp;
              </el-col>
              
            </el-col>
          </el-row>
            
        </div>
        <!-- 枚举弹出框 -->
        <el-dialog  :visible.sync="mainVisible" width="40%">
            <el-form ref="mainForm" :rules="mainRules" :model="mainForm" label-width="120px">
                <el-form-item label="枚举名称" prop="fdName">
                    <el-input class="input" v-model="mainForm.fdName"></el-input>
                </el-form-item>
                <el-form-item label="枚举类型"  prop="fdType">
                    <el-input class="input" v-model="mainForm.fdType"></el-input>
                </el-form-item>
                <el-form-item label="是否系统枚举" prop="fdIsSystem">
                    <el-switch v-model="mainForm.fdIsSystem" />
                </el-form-item>
                <el-form-item label="备注" prop="fdRemark">
                    <el-input  type="textarea" class="input" v-model="mainForm.fdRemark"></el-input>
                </el-form-item>
                <el-form-item label="默认值" prop="fdDefaultValue">
                    <el-input class="input" v-model="mainForm.fdDefaultValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  size="mini" @click="mainVisible = false">取 消</el-button>
                <el-button  size="mini" type="primary" @click="saveMainData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import dateUtils from '@/utils/dateUtils';
    import formUtils from '@/utils/formUtils';
    export default {
        name: 'sysEnumsMainList',
        data() {
            return {
                tableData:{
                    keyword: '',
                    size:0,
                    total:0,
                    current:1,
                    records: []
                },
                tableEnumData:[],
                mainForm:{
                  fdId:'',
                  fdName:'',
                  fdType:'',
                  fdIsSystem:false,
                  fdRemark:'',
                  fdDefaultValue:''
                },
                dataForm:{
                  fdId:'',
                  fdName:'',
                  fdValue:'',
                  fdMainId:''
                },
                mainRules:{
                  fdName :[{required: true, message: '请输入枚举名称', trigger: 'blur'}],
                  fdType :[{required: true, message: '请输入枚举类型', trigger: 'blur'}]
                },
                dataRules:{
                  fdName :[{required: true, message: '请输入枚举名', trigger: 'blur'}],
                  fdValue :[{required: true, message: '请输入枚举值', trigger: 'blur'}]
                },
                mainVisible:false,
                dataVisible:false,
                keyword: ''
            }
        },
        created() {
            this.getData();
        },
        methods: {
            add() {
                this.mainVisible = true;
            },
            getData() {
                this.$post('/api/sys/enums/sys_enums_main/list',{
                    keyword: this.tableData.keyword,
                    current: this.tableData.current
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            saveMainData() {
              this.$refs['mainForm'].validate((valid) => {
                if (valid) {
                    let forms = formUtils.convertToModel(this.mainForm);
                    this.$put('/api/sys/enums/sys_enums_main',forms).then((res) => {
                        this.mainVisible = false;
                        if(res.status==1){
                            this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            this.getData();
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                  }
              });
            },
            handlerSaveData(){
              this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    let forms = formUtils.convertToModel(this.dataForm);
                    this.$put('/api/sys/enums/sys_enums_data',forms).then((res) => {
                        if(res.status==1){
                          if(formUtils.isNotEmpty(this.dataForm.fdId)){
                            let index = this.tableEnumData.findIndex(n => n.fdId === this.dataForm.fdId);
                            let obj = formUtils.cloneObj(this.dataForm);
                            this.tableEnumData.splice(index,1,obj);
                          }else{
                            this.tableEnumData.push(forms);
                          }
                          this.handlerDataFormReset();
                          this.$message({
                              message: res.message,
                              type: 'success'
                          });
                            
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                  }
              });
            },
            query(){
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            dateFormat(obj,column){
                return dateUtil.format(obj.fdCreateTime);
            },
            handleReset(){
                this.mainForm = {
                  fdName:'',
                  fdType:'',
                  fdIsSystem:false,
                  fdRemark:'',
                  fdDefaultValue:''
                }
                
            },
            handleEdit(row){
                this.mainVisible = true;
                this.mainForm = row;
            },
            handleDelete(index,row){
              let tips = '此操作将删除该条记录,是否继续?';
              if(row.fdIsSystem){
                tips = '<strong style="color:red">此为系统内置枚举,请谨慎操作!</strong>';
              }
              this.$confirm(tips,{
                dangerouslyUseHTMLString: true
              }).then(() => {
                  this.$delete('/api/sys/enums/sys_enums_main',{
                      id:row.fdId
                  }).then((res) => {
                      this.tableData.records.splice(index,1)
                      this.$message({type:'success',message:'删除成功!'})
                  });
              })
            },
            handleCurrentChange(value){
                this.tableData.current = value;
                this.tableData.keyword = this.keyword;
                this.getData();
            },
            handlerShowEnums(row) {
              this.dataForm.fdMainId = row.fdId;
              this.$post('/api/sys/enums/sys_enums_data/list',{
                    'id': row.fdId
                }).then((res) => {
                    this.tableEnumData = res.data;
                });
            },
            handlerDataFormReset(){
              this.dataForm.fdId = '';
              this.dataForm.fdName = '';
              this.dataForm.fdValue = '';
            },
            handlerEnumDataEdit(row) {
              this.dataForm.fdId = row.fdId;
              this.dataForm.fdName = row.fdName;
              this.dataForm.fdValue = row.fdValue;
            },
            handlerEnumDataDelete(index ,row) {
              this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
                    this.$delete('/api/sys/enums/sys_enums_data',{
                        id:row.fdId
                    }).then((res) => {
                        this.tableEnumData.splice(index,1);
                        this.$message({type:'success',message:'删除成功!'})
                    });
                })
            }
        },
        watch:{
          mainVisible:function (newval){
            if(!newval){
              this.handleReset();
            }
          }
        }
    }
</script>

<style scoped>
 @import "~@/assets/css/list.css";
</style>
